<template>
  <table-where :forms="forms" />
  <el-tabs tab-position="left" class="demo-tabs" @tab-change="tabChange" type="border-card" v-model="tabs">
    <el-tab-pane v-for="(item, index) in empData" :label="item.name" :name="index">
      <wms-table ref="tableQuery" :tableDatas="tableDatas" />
    </el-tab-pane>
  </el-tabs>
  <el-drawer v-model="showDrawer" title="修改角色" show-close :close-on-click-modal="false" size="70%">
    <table-where :forms="EditForms" />
    <wms-table ref="tableQueryDrawer" :tableDatas="tableDatasDrawer" v-model:selectDatas="selectDatas" />
  </el-drawer>
</template>

<script setup name="角色信息">
import { POSTJSON, POST } from '@/components/utils/http'
import { ref, reactive, nextTick } from 'vue'
let empData = reactive([])
const tabs = ref(0)
const tagIndex = ref(0)
const tableQuery = ref()
const tableQueryDrawer = ref()
const showDrawer = ref(false)
let selectDatas = reactive([])
const tableDatas = reactive({
  body: {
    //表数据
    head: 'menu_permissions',
    url: '/Login/getRolePage',
    params: {},
    type: 'POSTJSON'
  },
  tableData: []
})
const tableDatasDrawer = reactive({
  paging: true,
  body: {
    //表数据
    head: 'wmsMenu',
    url: '/Menu/MenuPage',
    params: { startPosition: 0, maxResult: 9999 },
    type: 'POSTJSON'
  },
  tableData: [],
  selection: true
})

const forms = reactive({
  data: tableDatas.body.params,
  rules: [],
  compValue: [
    {
      label: '新增',
      type: 'button',
      onclick: () => {
        showDrawer.value = true

        nextTick(() => {
          tableQueryDrawer.value.getData()
        })
        EditForms.data = {}
      }
    },
    {
      label: '修改',
      type: 'button',
      onclick: () => {
        showDrawer.value = true
        nextTick(() => {
          tableQueryDrawer.value.getData().then(data => {
            const objs = []
            const ids = tableDatas.tableData
            ids.forEach(idsItem => {
              const obj = data.find(dataitem => dataitem.id === idsItem.menu_id)
              objs.push(obj)
            })
            tableQueryDrawer.value.addSelectDatas(objs)
          })
        })
      }
    },
    {
      label: '删除',
      type: 'button',
      onclick: () => {
        POST('/Login/deleteRole', { id: tableDatas.body.params.id }).then(data => {
          if (data.code > 0) {
            // tabChange(tagIndex.value);
            init()
          }
        })
      }
    }
  ]
})
const EditForms = reactive({
  data: {},
  rules: [],
  compValue: [
    { label: '名称', value: 'name', type: 'input' },
    {
      label: '保存',
      type: 'button',
      onclick: () => {
        const params = EditForms.data
        params.menu_id = []
        selectDatas.forEach(item => {
          params.menu_id.push(item.id)
        })
        POSTJSON('/Login/addRole', params).then(data => {
          if (data.code > 0) {
            showDrawer.value = false
            init()
          }
        })
      }
    },
    {
      label: '关闭',
      type: 'button',
      onclick: () => {
        showDrawer.value = false
      }
    }
  ]
})
const tabChange = i => {
  tableDatas.body.params.id = empData[i].id
  POSTJSON('/Login/getRolePage', { id: empData[i].id }).then(data => {
    tableDatas.tableData = data.data[0].menus
  })
  EditForms.data.id = empData[i].id
  EditForms.data.name = empData[i].name
  tagIndex.value = i
}
const init = () => {
  empData.splice(0, empData.length)
  POSTJSON('/Login/getRolePage', {}).then(data => {
    data.data.forEach(item => {
      empData.push(item)
    })
    tabChange(0)
  })
  tabs.value = 0
}
init()
</script>
